<template>
  <div id="App">
    <p>click  {{$store.state.count}} times, count is {{evenOrDer}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>

import {mapState, mapGetters,mapActions} from 'vuex'

export default {

  computed: {
    //mapState()返回值：{count() {return this.$store.state['count']}}
    ...mapState(['count']),
    //mapGetters()返回值对象：{evenOrOdd() {return this.$store.getters['evenOrOdd']} }
    ...mapGetters(['evenOrDer']),
    // evenOrDer () {
    //   return this.$store.getters.evenOrDer
    // },
    //
    // count() {
    //   return this.$store.state.count
    // }

  },

  methods: {
    ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync'])
  }

  // methods: {
  //   // 增加
  //   increment () {
  //     // 通知vuex去增加
  //     this.$store.dispatch('increment') //触发store中对应的action调用
  //
  //   },
  //
  //   // 减少
  //   decrement () {
  //     this.$store.dispatch('decrement')
  //   },
  //
  //   // 如果是奇数才增加
  //   incrementIfOdd () {
  //     this.$store.dispatch('incrementIfOdd')
  //   },
  //
  //   // 过1S才增加
  //   incrementAsync () {
  //     this.$store.dispatch('incrementAsync')
  //   }
  // }
}
</script>

<style>

</style>
